<template>
  <div class="progress-ring-container">
    <svg 
      :width="size" 
      :height="size" 
      class="progress-ring"
    >
      <!-- 背景圆环 -->
      <circle
        :cx="size / 2"
        :cy="size / 2"
        :r="radius"
        fill="transparent"
        stroke="#E2E8F0"
        :stroke-width="strokeWidth"
        class="transition-all duration-500"
      />
      
      <!-- 进度圆环 -->
      <circle
        :cx="size / 2"
        :cy="size / 2"
        :r="radius"
        fill="transparent"
        :stroke="strokeColor"
        :stroke-width="strokeWidth"
        :stroke-dasharray="circumference"
        :stroke-dashoffset="strokeDashoffset"
        class="progress-ring-circle transition-all duration-500 ease-in-out"
        :class="{ 'animate-pulse': progress === 100 }"
        stroke-linecap="round"
      />
    </svg>
    
    <!-- 中心文字 -->
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="text-center">
        <div 
          class="font-bold transition-all duration-500"
          :class="progress >= 100 ? 'text-accent-green' : 'text-primary-coral'"
          :style="{ fontSize: `${size * 0.15}px`, lineHeight: 1 }"
        >
          {{ progress }}%
        </div>
        <div 
          v-if="showLabel"
          class="text-xs text-text-secondary mt-1"
        >
          {{ label }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  progress: number // 0-100
  size?: number // 圆环大小，默认80
  strokeWidth?: number // 圆环宽度，默认8
  strokeColor?: string // 圆环颜色
  showLabel?: boolean // 是否显示标签
  label?: string // 标签文字
}

const props = withDefaults(defineProps<Props>(), {
  size: 80,
  strokeWidth: 8,
  strokeColor: 'linear-gradient(135deg, #FF6B6B, #FF8E53)',
  showLabel: false,
  label: ''
})

const radius = computed(() => (props.size - props.strokeWidth) / 2)
const circumference = computed(() => 2 * Math.PI * radius.value)

const strokeDashoffset = computed(() => {
  const offset = circumference.value - (props.progress / 100) * circumference.value
  return offset
})
</script>

<style scoped>
.progress-ring {
  transform: rotate(-90deg);
  transition: stroke-dasharray 0.5s ease-in-out;
}

.progress-ring-circle {
  transition: stroke-dashoffset 0.5s ease-in-out, stroke 0.3s ease-in-out;
}

/* 渐变色支持 */
.progress-ring-circle {
  stroke: url(#progressGradient);
}

/* 成功状态的脉冲动画 */
@keyframes pulse-ring {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.animate-pulse {
  animation: pulse-ring 2s infinite;
}
</style>

<style>
/* 为渐变色定义SVG定义 */
svg defs linearGradient {
  stop:first-child {
    stop-color: #FF6B6B;
  }
  stop:last-child {
    stop-color: #FF8E53;
  }
}
</style>